import { useEffect, useState } from "react";
import Bottom from "../components/bottom/Bottom";
import { Top } from "../components/top/Top";
import { Order1 } from "./order1/Order1";
import { Order2 } from "./order2/Order2";
import { ViewOrder } from "./vieworder/ViewOrder";
import { orderService } from "../../service/orderService";

export function Order() {
  const [status, setStatus] = useState(0);

  // 使用 useState 管理 order
  const [order, setOrder] = useState({
    userid: 1,
    orderdate: new Date(),
    cardtype: "Visa", // 与 Order1 初始值一致
    creditcard: "",
    exprdate: "",
    billtofirstname: "ABC", // 与 Order1 初始值一致
    billtolastname: "XYZ", // 与 Order1 初始值一致
    billaddr1: "901", // 与 Order1 初始值一致
    billaddr2: "M6", // 与 Order1 初始值一致
    billcity: "Palo", // 与 Order1 初始值一致
    billstate: "CA", // 与 Order1 初始值一致
    billzip: "94303", // 与 Order1 初始值一致
    billcountry: "CHINA", // 与 Order1 初始值一致
    shiptofirstname: "ABC", // 与 Order2 初始值一致
    shiptolastname: "XYX", // 与 Order2 初始值一致
    shipaddr1: "901", // 与 Order2 初始值一致
    shipaddr2: "M6", // 与 Order2 初始值一致
    shipcity: "Palo", // 与 Order2 初始值一致
    shipstate: "CA", // 与 Order2 初始值一致
    shipzip: "94303", // 与 Order2 初始值一致
    shipcountry: "CHINA", // 与 Order2 初始值一致
    totalprice: 0.0,
    locale: "",
  });
  // 为 Order1 准备的初始 formData
  const order1InitialFormData = {
    cardType: order.cardtype,
    cardNumber: order.creditcard,
    expiryDate: order.exprdate,
    firstName: order.billtofirstname,
    lastName: order.billtolastname,
    address1: order.billaddr1,
    address2: order.billaddr2,
    city: order.billcity,
    state: order.billstate,
    zip: order.billzip,
    country: order.billcountry,
  };

  // 为 Order2 准备的初始 formData
  const order2InitialFormData = {
    firstName: order.shiptofirstname,
    lastName: order.shiptolastname,
    address1: order.shipaddr1,
    address2: order.shipaddr2,
    city: order.shipcity,
    state: order.shipstate,
    zip: order.shipzip,
    country: order.shipcountry,
  };

  const callBackArray = [
    (form) => {
      setOrder((prevOrder) => ({
        ...prevOrder,
        cardtype: form.cardType,
        creditcard: form.cardNumber,
        exprdate: form.expiryDate,
        billtofirstname: form.firstName,
        billtolastname: form.lastName,
        billaddr1: form.address1,
        billaddr2: form.address2,
        billcity: form.city,
        billstate: form.state,
        billzip: form.zip,
        billcountry: form.country,
      }));
      console.log(order);
      setStatus(1);
    },
    (form) => {
      setOrder((prevOrder) => ({
        ...prevOrder,
        shiptofirstname: form.firstName,
        shiptolastname: form.lastName,
        shipaddr1: form.address1,
        shipaddr2: form.address2,
        shipcity: form.city,
        shipstate: form.state,
        shipzip: form.zip,
        shipcountry: form.country,
      }));
      
      orderService.confirmOrder(JSON.parse(localStorage.getItem("user")).username, order, (result) => {alert("Order submitted successfully!")});
      setStatus(2);
    },
    () => {
      setStatus(0);
    },
    () => {},
  ];

  const centerComponent = OrderTableController(status, callBackArray);
  return (
    <>
      <Top />
      {centerComponent}
      <Bottom />
    </>
  );

  function OrderTableController(status, callBackArray) {
    if (status === 0) {
      return <Order1 callBack={callBackArray[0]} initialFormData={order1InitialFormData} />;
    } else if (status === 1) {
      return (
        <Order2
          callBack={callBackArray[1]}
          backOrder1={callBackArray[2]}
          initialFormData={order2InitialFormData}
        />
      );
    } else if (status === 2) {
      return <ViewOrder callBack={callBackArray[3]} formData={order} />;
    }
  }
}